<!--
 * @FileDescription 综合评价页
 * @Author lz
 * @Date 20230130 17:58:14
 * @LastEditors lz
 * @LastEditTime 20230130 17:58:14
-->
<template>
    <div class="wp">
        <!-- 顶部 -->
        <hdrModel Hierarchy="5" :ID="0"></hdrModel>
        <!-- 成绩列表 -->
        <div class="contentBox">
            <div class="line"></div>
            <div class="col_l">
                <div class="tit_l">恭喜您！完成考核</div>
                <div class="score"><span class="amount">{{ state.Score }}</span><span class="company">分</span></div>
                <div class="master">
                    <div class="row_master" v-for="  (item, index) in state.VeidooList" :key="index">
                        <div class="master_l">{{ item.Name }}：</div>
                        <div class="master_r">
                            <img src="/images/stars.png" v-for="items in Math.trunc(parseFloat(item.Result))" :key="items">
                            <img src="/images/semistar.png" class="semistar" v-if="(parseFloat(item.Result) % 1) == 0.5">
                        </div>
                    </div>

                    <!-- <div class="row_master">
                        <div class="master_l">{{ state.Name1 }}：</div>
                        <div class="master_r">
                            <img src="/images/stars.png" v-for="item in Math.trunc(state.StructureVeidoo)" :key="item">
                            <img src="/images/semistar.png" class="semistar" v-if="(state.StructureVeidoo % 1) == 0.5">
                        </div>
                    </div>
                    <div class="row_master">
                        <div class="master_l">{{ state.Name2 }}：</div>
                        <div class="master_r">
                            <img src="/images/stars.png" v-for="item in Math.trunc(state.ComposeVeidoo)" :key="item">
                            <img src="/images/semistar.png" class="semistar" v-if="(state.ComposeVeidoo % 1) == 0.5">
                        </div>
                    </div>
                    <div class="row_master">
                        <div class="master_l">{{ state.Name3 }}：</div>
                        <div class="master_r">
                            <img src="/images/stars.png" v-for="item in Math.trunc(state.PrincipleVeidoo)" :key="item">
                            <img src="/images/semistar.png" class="semistar" v-if="(state.PrincipleVeidoo % 1) == 0.5">
                        </div>
                    </div>
                    <div class="row_master">
                        <div class="master_l">{{ state.Name4 }}：</div>
                        <div class="master_r">
                            <img src="/images/stars.png" v-for="item in Math.trunc(state.ArgumentsVeidoo)" :key="item">
                            <img src="/images/semistar.png" class="semistar" v-if="(state.ArgumentsVeidoo % 1) == 0.5">
                        </div>
                    </div> -->
                </div>
            </div>
            <div class="col_r">
                <div class="row_evaluation">
                    <div class="time">
                        <img class="txt_ico" src="/images/time.png">
                        <span class="txt_name">用时</span>
                        <span class="txt_value">{{ TM(state.useTiem) }}</span>
                    </div>
                    <div class="complete">
                        <img class="txt_ico" src="/images/complete.png">
                        <span class="txt_name">完成</span>
                        <span class="txt_value">{{ state.PercentageComplete }}</span>
                    </div>
                    <div class="accuracy">
                        <img class="txt_ico" src="/images/accuracy.png">
                        <span class="txt_name">正确率</span>
                        <span class="txt_value">{{ state.Accuracy }}%</span>
                    </div>
                </div>
                <div class="evaluationList">
                    <div class="list_box" v-for="( item, index ) in state.Items " :key="index">
                        <img src="/images/correct_graphical.png" v-if="item['State'] == '正确'">
                        <div class="eva_name" v-if="item['State'] == '正确'">{{ item['Name'] }}</div>
                        <div class="eva-type" v-if="item['State'] == '正确'">正确</div>

                        <img src="/images/error_graphical.png" v-if="item['State'] == '错误'">
                        <div class="eva_name error" v-if="item['State'] == '错误'">{{ item['Name'] }}</div>
                        <div class="eva-type error" v-if="item['State'] == '错误'">错误</div>

                        <img src="/images/notSubmitted_graphical.png" v-if="item['State'] == '未提交'">
                        <div class="eva_name not" v-if="item['State'] == '未提交'">{{ item['Name'] }}</div>
                        <div class="eva-type not" v-if="item['State'] == '未提交'">未提交</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import hdrModel from '../header/index.vue'
import { reactive, ref, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onUnmounted, StyleValue, defineProps, defineEmits } from 'vue'
import { ClientMessage } from '@runtime/generate/message/ClientMessage';
import WebSocketComponent from '@runtime/module/WebSocket/WebSocketComponent';
import MessageCode from '../MessageCode';
import { any } from 'vue-types';
import HomeContent from '../HomeContent';
const state = reactive({
    Score: '',//分数
    Items: <any>[],//列表
    PercentageComplete: '',//完成比例
    useTiem: 0,//用时
    Accuracy: 0,//正确率
    StructureVeidoo: 0,
    PrincipleVeidoo: 0,
    ComposeVeidoo: 0,
    ArgumentsVeidoo: 0,
    VeidooList: <any>[],
    Name1: '',
    Name2: '',
    Name3: '',
    Name4: '',
});
// 标定提交
async function obtain() {
    // 获取任务数据
    const resData: ClientMessage.StructureAdapterResponse = await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.CalibrationAdapterRequest(MessageCode.Default.MsgCodesList.APPRAISE_GET))
    console.log(resData, '+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++');
    const newData = JSON.parse(resData.Content)
    console.log(newData.Result);
    state.Score = newData.Result.Score
    state.Items = newData.Result.Items
    state.PercentageComplete = newData.Result.PercentageComplete
    state.useTiem = newData.Result.useTiem * 1000
    // state.Name1 = newData.Result.Veidoos[0].Name
    // state.Name2 = newData.Result.Veidoos[1].Name
    // state.Name3 = newData.Result.Veidoos[2].Name
    // state.Name4 = newData.Result.Veidoos[3].Name
    // state.Accuracy = parseFloat(newData.Result.Accuracy) * 100
    state.Accuracy = newData.Result.Accuracy
    state.VeidooList = newData.Result.Veidoos

    // state.StructureVeidoo = parseFloat(newData.Result.Veidoos[0].Result)
    // state.ComposeVeidoo = parseFloat(newData.Result.Veidoos[1].Result)
    // state.PrincipleVeidoo = parseFloat(newData.Result.Veidoos[2].Result)
    // state.ArgumentsVeidoo = parseFloat(newData.Result.Veidoos[3].Result)

    // 提交到平台
    let subData = JSON.parse(resData.Content).Result
    subData.Id = HomeContent.Default.CacheFullData.value.ResultId;
    subData.Orders = JSON.stringify(newData.Result);
    subData.Record = 0;
    subData.Tool = 0;
    subData.Standard = 0;
    subData.Process = 0;
    subData.Security = 0;
    subData.Efficiency = 0;
    subData.Score = parseInt(newData.Result.Score);
    subData.Time = newData.Result.useTiem;
    // 先获取得分和用时
    if (HomeContent.Default.CacheFullData.value.Mode == "4") {
          let response = await fetch(
            "http://virtual.eduhenghong.cn:4497/api/SkillsContest/SubmitResult",
            {
              method: "POST",
              body: JSON.stringify(subData),
              headers: {
                "Content-Type": "application/json",
                Authorization: `Bearer ${HomeContent.Default.CacheFullData.value.Token}`,
              },
            }
          );
    } else {
          let response = await fetch(
            "http://virtual.eduhenghong.cn:4497/api/TrainingResult/Submit",
            {
              method: "POST",
              body: JSON.stringify(subData),
              headers: {
                "Content-Type": "application/json",
                Authorization: `Bearer ${HomeContent.Default.CacheFullData.value.Token}`,
              },
            }
          );
        }
}
//时间转
function TM(ms: number) {
    let h: string | number = Math.floor(ms / 1000 / 60 / 60)
    let m: string | number = Math.floor(ms / 1000 / 60)
    let s: string | number = Math.floor(ms / 1000)

    if (h === 1) {
        // 当时间刚好是60分钟时，让它以mm:ss格式显示,即显示60:00,而不是显示01:00:00
        if (m / 60 === 1 && s % 60 === 0) {
            h = ''
            m = '60:'
        } else {
            h = '01:'
            m = addZero(m % 60) + ':'
        }
        s = addZero(s % 60)
    } else {
        h = h === 0 ? '' : addZero(h) + ':'
        m = addZero(m % 60) + ':'
        s = addZero(s % 60)
    }
    return h + m + s
}
// 进行补0操作
function addZero(n: string | number) {
    return n < 10 ? '0' + n : n
}
onMounted(() => {
    obtain()
});

</script>

<style scoped>
.wp {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: linear-gradient(60deg, #011D3D, #07264A);
    position: relative;
}

.contentBox {
    position: relative;
    margin: 0 auto;
    width: 1779px;
    height: 951px;
    background-image: url('/images/comprehensiveEvaluation_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.line {
    position: absolute;
    left: 583px;
    bottom: 52px;
    width: 1px;
    height: 800px;
    background-color: #3382B7;
}

.col_l {
    width: 570px;
    height: 891px;
    margin-left: 12px;
    margin-top: 48px;
    float: left;
}

.tit_l {
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    margin-top: 130px;
    color: #fff;
}

.score {
    text-align: center;
    margin-top: 80px;
}

.amount {
    font-size: 48px;
    font-weight: bold;
    color: #86F5FF;
}

.company {
    font-size: 24px;
    font-weight: bold;
    color: #C7F3FF;
}

.master {
    margin-top: 166px;
    overflow: hidden;
}

.row_master {
    overflow: hidden;
    margin-bottom: 20px;
}

.master_l {
    float: left;
    padding-left: 120px;
    font-size: 18px;
    font-weight: 400;
    color: #FFFFFF;
    margin-right: 10px;
}

.master_r {
    float: left;
}

.master_r>img {
    width: 26px;
    height: 26px;
    margin-right: 30px;
}

.semistar {
    width: 13px !important;
    margin-right: 43px !important;
}

.col_r {
    margin-top: 48px;
    float: left;
    width: 1180px;
    height: 891px;
}

.row_evaluation {
    width: 1059px;
    height: 136px;
    border-bottom: 1px solid #3381B6;
    margin: 0 auto;
    display: flex;
    text-align: center;
    line-height: 166px;
}

.time {
    flex: 1;
}

.complete {
    flex: 1;
}

.accuracy {
    flex: 1;
}

.txt_ico {
    width: 19px;
    margin-right: 8px;
    display: inline-block;
    vertical-align: middle
}

.txt_name {
    font-size: 20px;
    font-weight: 400;
    color: #B1D0F4;
    display: inline-block;
    vertical-align: middle;
}

.txt_value {
    font-size: 30px;
    font-weight: bold;
    color: #FFFFFF;
    margin-left: 13px;
    display: inline-block;
    vertical-align: middle;
}

.evaluationList {
    width: 1100px;
    margin: 0 auto;
    margin-top: 10px;
    height: 740px;
    overflow-y: auto;
}

.evaluationList::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

.evaluationList::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/

    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #3381B5;
}

.evaluationList::-webkit-scrollbar-track {
    /*滚动条里面轨道*/

    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #123965;
}

.list_box {
    margin: 0 auto;
    width: 1078px;
    height: 73px;
    background-image: url('/images/CElist_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
}

.list_box>img {
    width: 47px;
    float: left;
    margin-left: 29px;
    margin-top: 13px;
}

.eva_name {
    float: left;
    font-size: 18px;
    line-height: 73px;
    font-weight: bold;
    color: #4CE223;
}

.eva-type {
    float: right;
    font-size: 18px;
    line-height: 73px;
    margin-right: 70px;
    font-weight: bold;
    color: #4CE223;
}

.error {
    color: #EC3535;
}

.not {
    color: #fff;
    margin-right: 60px;
}
</style>